<template>
  <div v-FuntionlUnitFrameDrag ref="layerpanel" class="layerpanel fadeInRight animated">
    <div class="vl1-notify vl1-notify-main vl1-notify-alert vl1-notify-iframe">
      <h2 class="vl1-notice-title"><slot name="title"></slot><i class="fa fa-close" style="float: right; padding: 8px;cursor: pointer;" @click="closepanel"></i></h2>
      <div class="vl1-notify-content" style="">
        <div>
          <slot name="content"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "FunctionlUnitFrame",
    methods:{
      closepanel(){
        $('.layerpanel').removeClass('fadeInRight').addClass('fadeOutRight ');
        var that=this;
        setTimeout(function () {
          that.$emit('closePane',false);
        },500);
      }
    }
  }
</script>

<style scoped>
  .layerpanel{
    position: fixed;
    right: 15px;
    top:120px;
    border: none;
    z-index: 100;
  }

  .vl1-notify.vl1-notify-main {
    min-width: 250px;
    max-width: 1500px;
    min-height: 100px;
    height: 100%;
    background-color: rgba(45,52,68,.5);
    border: 2px solid rgba(255,255,255,.0);
    box-shadow: 1px 1px 50px rgba(0,0,0,.0);
    border-radius: 20px;
    padding-bottom: 5px;
  }
  .vl1-notify.vl1-notify-alert .vl1-notify-content {
    color: white;
    padding: 5px;
  }
  .vl1-notify.vl1-notify-alert h2.vl1-notice-title {
    border-radius: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 43px;
    line-height: 43px;
    background-color:rgba(45,52,68,.8);
    border-bottom: 2px solid rgba(45,52,68,.6);
    font-size: 16px;
    padding-left: 15px;
    cursor: move;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    margin: 0;
  }

  .vl1-notice-title{
    color: white;
  }

  @media screen and (max-width: 500px){
    .vl1-notify.vl1-notify-main {
      min-width: 120px;
      max-width: 500px;
      min-height: 100px;
      height: 100%;
      background-color: rgba(45,52,68,.5);
      border: 2px solid rgba(255,255,255,.0);
      box-shadow: 1px 1px 50px rgba(0,0,0,.0);
      border-radius: 5px;
      padding-bottom: 5px;
    }
    .vl1-notify.vl1-notify-alert .vl1-notify-content {
      color: white;
      padding: 5px;
      font-size: 12px;
    }
    .vl1-notify.vl1-notify-alert h2.vl1-notice-title {
      border-radius: 5px;
      box-sizing: border-box;
      width: 100%;
      height: 33px;
      line-height: 33px;
      background-color:rgba(45,52,68,.8);
      border-bottom: 2px solid rgba(45,52,68,.6);
      font-size: 12px;
      padding-left: 15px;
      cursor: move;
      -moz-user-select: -moz-none;
      -webkit-user-select: none;
      margin: 0;
    }
    .vl1-notice-title{
      color: white;
    }
  }
</style>
